Skip to content

docs: Fix picker event handling in React/Next.js by documenting correct event names#83

Closed
Copilot wants to merge 4 commits intomainfrom
copilot/fix-picker-picked-event
Closed

docs: Fix picker event handling in React/Next.js by documenting correct event names#83
Copilot wants to merge 4 commits intomainfrom
copilot/fix-picker-picked-event

Conversation

Copy link

Copilot AI commented Oct 15, 2025

  • Analyze the issue with picker events in React/Next.js
  • Identify that React has issues with colon-based event names
  • Identify timing issues in user's implementation
  • Update README to provide clear React/Next.js event handling examples
  • Add comprehensive documentation about event naming (picker-picked vs picker:picked)
  • Update React example in README to show proper event listener setup
  • Ensure documentation emphasizes using the non-deprecated event names
  • Run linting and type checking to validate changes
  • Commit changes with detailed message
  • Address review feedback: Remove note about hyphenated event names from React section
  • Address review feedback: Remove deprecation note from event listening section
Original prompt

This section details on the original issue you should resolve

<issue_title>picker-picked event is not trigerring in next.js</issue_title>
<issue_description>I have added this component in nextjs(version 15.5).
I have tried to trigger the picker-picked to get the selected file details.
But that event is not triggering.
Please correct me if I am doing it in wrong way .
Below is my component code.

import { useState, useEffect, useRef } from "react";
import React from "react";

import { ClientSDK } from "@sitecore-marketplace-sdk/client";

export default function DrivePicker({ client }: { client: ClientSDK | null }) {
useEffect(() => {
import("@googleworkspace/drive-picker-element");
}, []);

const [isOpen, setIsOpen] = useState(false);
const ref = useRef(null);
useEffect(() => {
const driveFiePickedEvent = (file: any) => {
const file1 = file;
console.log(file1);
};

if (ref && ref.current) {
  ref.current.addEventListener("picker:picked", driveFiePickedEvent);
}

const drivepicker = document.querySelector("drivePicker");
if (drivepicker) {
  drivepicker.addEventListener("picker:picked", (e: any) => {
    const file1 = e;
    console.log(file1);
  });
}

//drivepicker?.addEventListener("picker:picked", driveFiePickedEvent);
// if (ref && ref.current) {
//   ref.current.addEventListener("picker:picked", driveFiePickedEvent);
// }

}, [isOpen]);

const openDrivePicker = () => {
setIsOpen(true);
};

return (


Drive Path Selector

  {isOpen ? (
    <drive-picker
      id="drivePicker"
      client-id="1033854675629-vh9gj2qj5vh86mamqgaqjigon3nkqh25.apps.googleusercontent.com"
      app-id="mythic-producer-160908"
    >
      <drive-picker-docs-view
        include-folders="true"
        select-folder-enabled="true"
      />
    </drive-picker>
  ) : (
    <></>
  )}

  <button
    className="bg-blue-500 rounded-lg px-4 py-2"
    onClick={openDrivePicker}
  >
    Open Google Drive
  </button>
</div>

);
}</issue_description>

<agent_instructions>verify the event name and assess if react/next do anything to break this.
</agent_instructions>

Comments on the Issue (you are @copilot in this section)

@jpoehnelt Were you able to resolve this?

Fixes #82


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

@google-cla
Copy link

google-cla bot commented Oct 15, 2025

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

- Replace deprecated colon-based event names with hyphenated versions
- Add comprehensive React/Next.js example showing proper event listener setup
- Explain why hyphenated event names should be used (especially for React)
- Update event detail examples to use new event names
- Add important notes for React/Next.js developers

Fixes issue with picker-picked event not triggering in Next.js by documenting
the correct event names and proper implementation pattern.
Copilot AI changed the title [WIP] Fix picker-picked event not triggering in Next.js docs: Fix picker event handling in React/Next.js by documenting correct event names Oct 15, 2025
Copilot AI requested a review from jpoehnelt October 15, 2025 10:00
Co-authored-by: jpoehnelt <3392975+jpoehnelt@users.noreply.github.com>
Copilot AI requested a review from jpoehnelt October 15, 2025 10:05
Co-authored-by: jpoehnelt <3392975+jpoehnelt@users.noreply.github.com>
Copilot AI requested a review from jpoehnelt October 15, 2025 10:09
@jpoehnelt jpoehnelt marked this pull request as ready for review October 15, 2025 10:16
@jpoehnelt jpoehnelt closed this Oct 15, 2025
@jpoehnelt jpoehnelt deleted the copilot/fix-picker-picked-event branch October 15, 2025 10:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

picker-picked event is not trigerring in next.js

2 participants